<!-- 扬尘检测/右侧顶部 -->
<template>
  <div class="RightTop">
    <checked-title :title="title">
      <template #right>
        <div
          class="title2 pointer"
          :class="active == item.value ? 'active' : ''"
          @click="tabChange(item.value)"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item.title }}
        </div>
      </template>
    </checked-title>
    <div
      class="echarts"
      id="echarts1"
      ref="echarts1"
      style="height: 300px"
    ></div>
  </div>
</template>

<script>
import Highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(Highcharts)
import { getRunState } from '@/api/index'
import { YangChenJianCeDB } from '@/api'

export default {
  data() {
    return {
      title: '今日街办空气质量排名',

      active: 'a34004',
      tabList: [
        { title: 'PM2.5', value: 'a34004' },
        { title: 'PM10', value: 'a34002' },
        { title: '噪声', value: 'n00001' },
        { title: 'TSP', value: 'a34001 ' },
      ],

      data: [],
      num: [],
    }
  },
  mounted() {
    this.rankingList()
  },
  beforeDestroy() {
    this.desHander()
  },
  methods: {
    // 更新
    tabChange(active) {
      this.active = active
      this.rankingList('tabChange')
    },
    initChat() {
      var myChart = echarts.init(this.$refs.echarts1)
      var option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(31, 73, 135, 0.5)', //设置背景图片 rgba格式
          borderWidth: '0', //边框宽度设置1
          textStyle: {
            color: '#fff', //设置文字颜色
          },
          axisPointer: {
            type: 'line', //line,shadow
            lineStyle: {
              type: 'solid', //打开就是实线类型
              color: 'rgba(13, 151, 235, 0.7)',
            },
          },
          formatter: (params) => {
            let str = ` ${params[0].name} <br/> 数值:${params[0].data}${
              this.active == 'n00001' ? 'dB' : 'μg/m³'
            }`

            return str
          },
        },
        grid: {
          top: '10%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.data,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            rotate: 50,
            interval: 0,
            textStyle: {
              color: '#9ED5FF',
              fontSize: 12,
            },
          },
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(13, 151, 235, 0.1)',
              type: 'dashed',
            },
          },
        },
        series: [
          {
            data: this.num,
            type: 'bar',
            barMaxWidth: 15,
            barGap: '10%',
            itemStyle: {
              normal: {
                color: function(params) {
                  // 定义换色数组
                  let colorList = [
                    ['rgba(18, 81, 210, 1)', 'rgba(27, 223, 252, 1)'],
                    ['rgba(124, 255, 149, 0.92)', 'rgba(17, 155, 238, 0)'],
                  ]
                  if (params.dataIndex % 2 == 0) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: colorList[0][0],
                      },
                      {
                        offset: 1,
                        color: colorList[0][1],
                      },
                    ])
                  } else {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: colorList[1][0],
                      },
                      {
                        offset: 1,
                        color: colorList[1][1],
                      },
                    ])
                  }
                },
                label: {
                  show: false,
                },
                barBorderRadius: [30, 30, 0, 0], //圆角大小
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    },
    // 排名统计数据
    rankingList(type) {
      const data = {
        signalCode: this.active,
        type: 2,
      }
      YangChenJianCeDB.JiebanPaimingTongJi(data).then((res) => {
        this.data = []
        this.num = []
        res.data.forEach((item) => {
          this.data.push(item.street)
          this.num.push(item.value)
        })
        if (type == 'tabChange') {
          var chart = echarts.getInstanceByDom(this.$refs.echarts1)
          var option = chart.getOption()
          option.series[0].data = this.num
          chart.setOption(option)
        } else {
          this.initChat()
        }
      })
    },

    desHander() {
      let myChart = echarts.init(this.$refs.echarts1)
      myChart.dispose()
    },
  },
}
</script>
<style lang="less" scoped></style>
